<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/video.css"  rel="stylesheet" />
	</head>

<style>
	*{
		font-family:PingFang-SC-Bold;
	}
	.mui-bar-nav{
		box-shadow: none;
		background: #FFFFFF;
		border-bottom: 1px solid rgba(248,248,248,1);
	}
	
	.mui-title{
		font-weight:bold;
color:rgba(51,51,51,1);
	}
	.mui-content{
		position: relative;
		width: 100%;
		background: #FFFFFF;
		height: 100%;
		padding-bottom: 20px;
		display: inline-block;
	}
	.shipin{
		position: relative;
		float: left;
		width: 100%;
		    background: #ffffff;
		padding:  0  15px;
		box-sizing: border-box;
	}
	.shipin>div:nth-child(1){
		position: relative;
		 float: left;
		 width: 100%;
		 text-align: center;
	}
	
	
	.shipin>div:nth-child(1)>video{
		width: 100%;
		height: 100%;
	}
	.shipin>div:nth-child(2){
		position: relative;
		float: left;
		width: 100%;
		text-align: center;
		font-size:15px;
        font-weight:500;
        color:rgba(51,51,51,1);
	}
	.hang{
		position: relative;
		float: left;
		width: 100%;
		height:10px;
		background: rgba(248,248,248,1);;
	}
	
	.fenlei{
		position: relative;
		float: left;
		width: 100%;
		background: #FFFFFF;
		padding: 0  15px;
		height: 55px;
	}
	.fenlei>div{
		position: relative;
		float: left;
		width: 130px;
		height: 100%;
		line-height: 55px;
		 font-size:16px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
	}
	.mui-btn-block{
		position: relative;
		float: right;
		width: 135px!important;
		height: 55px!important;
		text-align: right;
		 font-size:14px;
         font-weight:500;
         color:rgba(205,205,205,1)!important;  
		 line-height: 55px!important;
		 padding: 0 0 !important;
		 padding-left: 20px!important;
		 border: none;
	}
	
	.shipinname{
		position: relative;
		float: left;
		width: 100%;
		height: 55px;
		line-height: 55px;
		padding: 0 15px;
		box-sizing: border-box;
		border: none;
		font-size:15px;
        font-weight:500;
        color:rgba(153,153,153,1);
		background: #FFFFFF;
		border-bottom: 2px solid rgba(248,248,248,1);
	}
	#textarea{
		border: none;
		padding: 5px 15px;
		box-sizing: border-box;
		line-height: 22px;
		font-size: 15px;
		border: 1px  solid  rgba(248,248,248,1);
	}
		.tupian{
		position: relative;
		float: left;
		width: 100%;
		background: #FFFFFF;
		padding: 0px  15px;
		padding-bottom: 10px;
		box-sizing: border-box;
	}
	.tupian>.tupians{
		position: relative;
	      width: 100%;
		float: left;
	}
	.tupian>.tupians>div{
		width: calc((100% - 36px) / 3);
		height: 107px;
		margin-left: 12px;
		position: relative;
		float: left;
		margin-top: 10px;
	}
	.tupian>.tupians>div>.danimg{
		width: 100%;
		height: 107px;
	}
	
	.tupian>.tupians>div>.danimg2{
		position: absolute;
		right:0px;
		top: 0px;
		width: 18px;
		height: 18px;
		z-index: 10;
	}
	.huqueren{
		position: relative;
		float: left;
		width: 100%;
		height: 43px;
		background: #FFFFFF;
	}
	.mui-btnss{
		position: relative;
		float: left;
		width: calc(100% - 30px);
		height: 43px;
		margin-left: 15px;
		box-sizing: border-box;
		border: none;
		text-align: center;
	color:rgba(255,255,255,1);
		background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
      box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
border-radius:43px;
	}
	options{
		font-size: 14px;
	}
		.shangchuan{
		width: 30%;
		height: 107px;
		margin-left: 12px;
		position: relative;
		float: left;
		margin-top: 10px;
	}
	input[type=text]{
		border: none;
		margin-bottom:0px;
	}
	
	*{
		font-family:PingFang-SC-Bold;
	}
	      .mui-bar{ box-shadow: none; background: white; height:50px;}
			.mui-bar .mui-icon{ margin-top:4px; font-size:28px; color: #999999; }
			.mui-bar-nav.mui-bar .mui-icon{padding-left:5px;}
			.mui-bar .mui-title{margin-top:6px;color: #2f2f2f; font-weight: normal;}
			.more{ margin-top: 16px; margin-right: 5px;}
			.mui-bar:after
	 {
	position: absolute;
	right: 0;
	 bottom: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color:#dadada; 	
	    		 }
	body{ background: white; }
	.mui-content{ padding-bottom:40px; display: inline-block; margin-top: 10px;background: white; }
	.user_txt{padding-left: 1rem; height: 25px; margin: 0px; margin-bottom: 20px;}
	.news_title{
		font-size: 1.4rem;
	    line-height: 1.5;
	    font-weight:500;
	    padding-left: 1rem;
	    padding-right: 1rem;
	    margin-top: .9rem;
	    margin-bottom: .3rem;
	    }
	.user_img{ width: 25px; height: 25px; border-radius: 25px; margin-right: 5px;}
	.user_name,.news_time{ position: relative; top: -8px; font-size: 12px;}
	.news_time{  margin-left: 10px;}
	.text_dome{ padding: 10px;}
	.text_dome b{ color: #000000; font-size: 16px;}
	
	#openvideo{ height: 50px; line-height: 50px; color:white; text-align: center; position: fixed; z-index:110; bottom: 0px; width: 100%; background-color:#000000;}
	.mui-video-Container {
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 10px;
		padding: 0px;
	}
	
	.mui-video-Container .mui-video-full {
		position: relative;
		overflow: hidden;
	}
	
	.mui-video-Container video {
		width: 100%;
		background-color: #000000;
	}
	
	.mui-video-Container video[ishivideo="true"]::-webkit-media-controls {
		display: none !important;
	}
	
	.mui-video-Container video[ishivideo="true"]::-moz-media-controls {
		display: none !important;
	}
	
	.mui-video-Container video[ishivideo="true"]::media-controls {
		display: none !important;
	}
	
	.mui-video-Container .icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
		font-size: 20px;
		position: relative;
		top: 1px;
	}
	
	.mui-video-Container .rprogress {
		position: absolute;
		left: 0px;
		top: 0px;
		bottom: 0px;
		right: 0px;
		margin: auto;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		display: none;
	}
	
	.mui-video-Container .rprogress .ladtit {
		color: white;
		font-size: 14px;
	}
	
	.mui-video-Container .rschedule {
		background-color: rgba(0, 0, 0, 0);
		border: 3px solid rgba(0, 183, 229, 0.9);
		opacity: .9;
		border-left: 5px solid rgba(0, 0, 0, 0);
		border-right: 5px solid rgba(0, 0, 0, 0);
		border-radius: 50px;
		box-shadow: 0 0 15px #2187e7;
		width: 46px;
		height: 46px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -23px;
		margin-top: -23px;
		-webkit-animation: spin 1s infinite linear;
		animation: spin 1s infinite linear;
	}
	
	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}
	
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	
	/*横条样式*/
	.mui-video-Container input[type=range] {
		-webkit-appearance: none;
		/*清除系统默认样式*/
		width: 100%;
		background: -webkit-linear-gradient(#40CEA8, #40CEA8) no-repeat, #fff;
		/*设置左边颜色为#61bd12，右边颜色为#ddd*/
		background-size: 0% 100%;
		/*设置左右宽度比例*/
		height: 3px;
		/*横条的高度*/
	}
	
	/*拖动块的样式*/
	.mui-video-Container input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		/*清除系统默认样式*/
		height: 13px;
		/*拖动块高度*/
		width: 13px;
		/*拖动块宽度*/
		background: #fff;
		/*拖动块背景*/
		border-radius: 50%;
		/*外观设置为圆形*/
		/* border: solid 1px #ddd;*/
		/*设置边框*/
	}
	
	.mui-video-Container .mui-pay_ico {
		z-index: 2;
		width: 80px;
		text-align: center;
		height: 80px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	
	.mui-video-Container .mui-pay_ico .icon {
		font-size: 52px;
		color: white;
	}
	
	.mui-video-Container .mui-time-current {
		width: 46px;
		float: left;
		text-align: right;
		display: inline-block;
		color: white;
		font-size: 14px;
	}
	
	.mui-video-Container .mui-time-total {
		width: 78px;
		text-align: center;
		color: white;
		display: inline-block;
		font-size: 14px;
	}
	
	.mui-video-Container .mui-time-total .icon {
		font-size: 28px;
		color: white;
	}
	
	.mui-video-Container .mui-time-cout {
		float: left;
		margin-top: -5px;
	}
	
	.mui-video-Container .mui-quanping {
		margin-top: 6px;
		margin-left: 3px;
		position: absolute;
		right: 0px;
		z-index: 10;
	}
	
	.mui-video-Container .mui-videoControls {
		height: 40px;
		width: 100%;
		line-height: 40px;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 9;
		bottom: 0px;
		overflow: hidden;
	}
	
	.mui-video-Container .mui-progressWrap {
		height: 20px;
		width: 100%;
		position: absolute;
		top: 18px;
		left: 55px;
	}
	
	.mui-video-Container .mui-progressWrap .mui-wrap-right {
		position: absolute;
		width: 100%;
		padding-right: 148px;
	}
	
	.mui-video-Container .mui-full-back {
		position: absolute;
		z-index: 2;
		display: none;
	}
	
	.mui-video-Container .mui-full-back .icon {
		font-size: 26px;
		color: white;
		left: 15px;
		top: 5px;
	}
	
	.mui-video-Container .mui-full-back .vtitle {
		color: white;
		margin-left: 15px;
		position: relative;
		top: 4px;
		font-size: 15px;
	}
	
	.mui-video-Container .v_left,
	.mui-video-Container .b_right {
		position: absolute;
		width: 50%;
		height: 100%;
		z-index: 1;
	}
	
	.mui-video-Container .b_right {
		right: 0px;
	}
	
	.mui-video-Container .ptime {
		position: absolute;
		z-index: 2;
		left: 0px;
		text-align: center;
		display: none;
		top: 0px;
		bottom: 0px;
		right: 0px;
		margin: auto;
		border-radius: 3px;
		background-color: rgba(0, 0, 0, 0.6);
		height: 40px;
		width: 120px;
		line-height: 40px;
		color: white;
	}
	.text_dome{
		text-indent: 2em;
	}
	
	.dianzan{
		position: relative;
		float: left;
		width: 100%;
		height: 60px;
		padding: 8px 10px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(235,235,235,1);
	}
	
	.dianzan>div{
		position: relative;
	    width: 70px;
		height: 44px;
		float: left;
	
	}
	.dianzan>div>img{
		width: 22px;
		height: 22px;
		position: relative;
		float: left;
		margin-top: 11px;
	}
	
	.dianzan>div>span{
		padding: 0 5px;
		box-sizing: border-box;
		font-size:13px;
	    font-weight:500;
	    color:rgba(254,97,94,1);
	    line-height:44px;
	}
	
	.pinglun{
		position: relative;
		float: left;
		width: 100%;
		padding: 10px 10px;
		box-sizing: border-box;
		padding-bottom: 80px;
	}
	.pinglun>div:nth-child(1){
		position: relative;
		float: left;
		width: 100%;
	} 
	.pinglun>div:nth-child(1)>span:nth-child(1){
	  position: relative;
	  float:left;
	  width: 40px;
	  line-height: 36px;  
	 font-size:13px;
	font-weight:500;
	color:rgba(102,102,102,1);
	}
	.pinglun>div:nth-child(1)>span:nth-child(2){
		  position: relative;
		  float:left;
		  width: calc(100% - 40px);
		  text-align: left;
		  line-height: 36px;  
		 font-size:13px;
		font-weight:500;
		color:rgba(102,102,102,1);
	}
	
	.danping{
		position: relative;
		float: left;
		width: 100%;
	}
	.danping>.danshi{
		position: relative;
		float: left;
		width: 100%;
		background: #FFFFFF;
		padding: 15px  0;
		border-bottom: 1px solid  rgba(235,235,235,1);
	}
	.danshi>div:nth-child(1){
		position: relative;
		float: left;
		width: 100%;
	    height: 40px;
	}
	.danshi>div:nth-child(2){
		position: relative;
		float: left;
		margin-top: 15px;
		width: 100%;
		font-size:14px;
	font-weight:500;
	color:rgba(102,102,102,1);
	line-height:22px;
	text-indent: 2em;
	}
	
	.danshi>div:nth-child(1)>div:nth-child(1){
		position: relative;
		float: left;
		width: 40px;
		height: 40px;
	}
	.danshi>div:nth-child(1)>div:nth-child(1)>img{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.danshi>div:nth-child(1)>div:nth-child(2){
		position: relative;
		float: left;
		width: calc(100% - 40px);
		height: 40px;
		padding-left: 15px;
		box-sizing: border-box;
	}
	.danshi>div:nth-child(1)>div:nth-child(2)>div{
	position: relative;
		float: left;
		width: 100%;
		height: 20px;
		line-height: 20px;
		font-size:11px;
	font-weight:500;
	color:rgba(102,102,102,1);
	}
	.hufoot{
		position: fixed;
		width: 100%;
		height: 66px;
		padding: 13px  15px;
		background:rgba(252,252,252,1);
	    box-shadow:0px 5px 7px 0px rgba(239, 239, 239, 0.35);
		bottom: 0px;
	    z-index: 10;
	}
	
	.hufoot>input{
		position: relative;
		float: left;
		width:calc(100% - 95px);
		height: 40px;
		border:1px solid rgba(232,232,232,1);
	border-radius:4px;
	box-sizing: border-box;
	font-size:14px;
	font-weight:500;
	color:rgba(153,153,153,1);
	line-height:40px;
	
	}
	.hufoot>div{
		text-align: center;
		width: 80px;
		height: 40px;
		position: relative;
		float: right;
		line-height: 40px;
		font-size:14px;
	font-weight:bold;
	color:rgba(255,255,255,1);
	background:linear-gradient(84deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
	border-radius:4px;
	}
	.shangp_one{
		width: 100%;
		position: relative;
		float: left;
		padding-left: 15px;
		box-sizing: border-box;
		border-bottom: 1px solid #F8F8F8;
		padding-bottom: 15px;
		padding-top: 15px;
	}
	.shangp_one>span{
		font-size:16px;
		font-family:PingFang-SC-Bold;
		font-weight:bold;
		color:rgba(51,51,51,1);
		
	}
	.shangp_one>input{
		width: 80%;
		border:none;
		position: relative;
		float: right;
		margin-top: -8px;
		margin-bottom: 0px; 
	}
	input::-webkit-input-placeholder { 
	text-align:right; 
	font-size:14px;
	font-family:PingFang-SC-Medium;
	font-weight:500;
	color:rgba(205,205,205,1);
}


  #mainimg{
	  position: relative;
	  max-height: 200px;
	  overflow: hidden;
  }
  
	.shipin{
		position: relative;
		float: left;
		width: 100%;
		    background: #ffffff;
		padding:  0  15px;
		box-sizing: border-box;
	}
.shipin>textarea{
	border: none;
	width: 100%;
	height: 150px;
	resize: none;
	font-size:16px;
font-weight:500;
color:rgba(153,153,153,1);
}
</style>
	<body>
	  <header class="mui-bar mui-bar-nav">
	  	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	  	<h1 class="mui-title">我的图片动态</h1>
	  </header>
		<div class="mui-content">
			
		 <div class="shipin">
		   <textarea  id="ssss" rows="5"  placeholder="这一刻的想法..."  style="resize:none;"   autofocus=""></textarea>
		 </div>
		
	     
	    <div class="tupian">
			
              <div  class="tupians">
             					
             	</div>
            <img class="shangchuan"  id="otherimg" src="../image/shangchuanddd.png" />		
		</div>
	
	 
	<div  class="huqueren"> <button type="button" class="mui-btnss">发布动态</button></div> 
	 
		  </div>
		  
		</div>
	</body>
<script src="../js/mui.min.js"></script>
<script  src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/upyinandimg.js"></script>
<script type="text/javascript">
	mui.plusReady(function(){
		var url = plus.storage.getItem('url');
		var user = plus.storage.getItem('user');
		user = JSON.parse(user);
	
		
		mui('.huqueren').on('tap','button',function(){
			$(this).focus();
			var tupian = listid;
			var dir = $("#ssss").val();
			if(!dir){
				mui.toast('请输入你的想法!!');
				return;
			}
			// plus.nativeUI.showWaiting();
			mui.post(url+'/juyou/Jiaoyou/adddongtaiimg',{token:user.token,dir:dir,tupian:tupian},function(res){
				if(res.code==200){
					mui.toast(res.msg);
					setTimeout(function(){
						mui.back();
					},1000)
				}else if(res.code==206){
					mui.toast(res.msg);
						setTimeout(function(){
							mui.openWindow({
								url:'huchongzhi.html',
								id:'huchongzhi.html'
							})
						},1500)
					}else{
					mui.toast(res.msg);
				}
			})
			
		})
		
		
		
		mui.init()
		var  fengmianid="";   // 封面图
			   var  listid=[];
		
		                    // 点击添加商品图   //还要存储一个ID  
		                   document.getElementById('otherimg').addEventListener('tap', function() {
							   if(listid.length>9){
								   mui.toast('动态最多上传9张图片');
								   return;
							   }
							   
							   
									if (mui.os.plus) {
										var a = [{
											title: "拍照"
										}, {
											title: "从手机相册选择"
										}];
										plus.nativeUI.actionSheet({
											title: "商品图",
											cancel: "取消",
											buttons: a
										}, function(b) { /*actionSheet 按钮点击事件*/
											switch (b.index) {
												case 0:
													break;
												case 1:
													getImages( url+'/juyou/index/upimgs', function(data){
		                                            var str="";
			                                     	str+="<div  class='imgdddd' ceshi='2'><img class='danimg'  src='"+data.path+"' /><img  ids='"+data.id+"'  class='danimg2' src='../image/fork.png'/></div>"
			                                     	$(".tupians").append(str);
													listid.push(data.id)
													}); /*拍照*/
													break;
												case 2:
													galleryImages( url+'/juyou/index/upimgs',  function(data){
		                                            var str="";
			                                     	str+='<div  class="imgdddd" ceshi="2"><img class="danimg"  src="'+data.path+'" /><img  ids="'+data.id+'"  class="danimg2" src="../image/fork.png" /></div>'
			                                     	$(".tupians").append(str);
													listid.push(data.id)

													}); /*打开相册*/
													break;
												default:
													break;
											}
										})
									}
								}, false);
		
		  //点击删除照片
		  mui(document).on("tap",".danimg2",function(){
			var  ids=$(this).attr("ids");
			var index = listid.indexOf(ids);
			 listid.splice(index,1)   //移除id
		  var is=$(this).parent().closest(".imgdddd").css("display","none")
			})
				
		
	})
			

      



		</script>
</html>